﻿/*
 * show mouse coords, scale and zoom
 */
define([
    'dojo/_base/declare',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'dojo/_base/lang',
    'dojo/html',
    'dojo/dom-style',
    'dojo/number',
    'dojo/topic',
    'xstyle/css!./MapInfo/css/MapInfo.css'
], function (
    declare,
    WidgetBase,
    TemplatedMixin,
    lang,
    html,
    style,
    number,
    topic
) {
    'use strict';
    return declare([WidgetBase, TemplatedMixin], {
        map: null,
        firstCoord: 'x',
        showScale: false,
        showZoom: false,
        xLabel: '',
        yLabel: '',
        scaleLabel: '1:',
        zoomLabel: 'Z:',
        minWidth: 0,        
        constructor: function (options) {
            declare.safeMixin(this, options || {});
            //template
            var ts = '<div class="gis-dijit-MapInfo">';
            if (this.showScale) {
                ts += '<strong>比例尺</strong> ${scaleLabel}<span data-dojo-attach-point="scaleNode"></span>&nbsp;&nbsp;';
            }
            if (this.showZoom) {
                ts += '${zoomLabel}<span data-dojo-attach-point="zoomNode"></span>&nbsp;&nbsp;';
            }
            var fc = this.firstCoord;
            if (fc === 'x') {
                ts += '<strong>坐标</strong> ${xLabel}<span data-dojo-attach-point="xNode"></span>&nbsp;&nbsp;${yLabel}<span data-dojo-attach-point="yNode"></span>';
            } else if (fc === 'y') {
                ts += '${yLabel}<span data-dojo-attach-point="yNode"></span>&nbsp;&nbsp;${xLabel}<span data-dojo-attach-point="xNode"></span>';
            } else {
                this.firstCoord = 'x';
                ts += '${xLabel}<span data-dojo-attach-point="xNode"></span>&nbsp;&nbsp;${yLabel}<span data-dojo-attach-point="yNode"></span>';
            }
            ts += '</div>';
            this.templateString = ts;
        },
        postCreate: function () {
            var map = this.map;
            if (!map) {
                topic.publish('viewer/handleError', {
                    source: 'MapInfo',
                    error: 'A map reference is required'
                });
                this.destroy();
                return;
            }
            //initialize when map loaded
            if (map.loaded) {
                this._initialize(map);
            } else {
                map.on('load', lang.hitch(this, '_initialize', map));
            }
        },
        _initialize: function (map) {
            var wkid = map.spatialReference.wkid;               
            
            if (this.minWidth) {
                style.set(this.domNode, 'minWidth', this.minWidth + 'px');
            }
            if (this.showScale) {
                this._setScale();
                map.on('zoom-end', lang.hitch(this, '_setScale'));
            }
            if (this.showZoom) {
                this._setZoom();
                map.on('zoom-end', lang.hitch(this, '_setZoom'));
            }
            map.on('mouse-move, mouse-drag', lang.hitch(this, '_setCoords'));
        },
        _setCoords: function (evt) {
            var pnt = evt.mapPoint;
            this._xCoord(number.round(pnt.x, 3));
            this._yCoord(number.round(pnt.y, 3));            
        },
        _setScale: function () {
            html.set(this.scaleNode, String(number.format(number.round(this.map.getScale(), 0))));
        },
        _xCoord: function (value) {
            html.set(this.xNode, String(value));
        },
        _yCoord: function (value) {
            html.set(this.yNode, String(value));
        }
    });
});